<template>
  <div class="con">
    <a-tabs style="background-color: white" v-model:active-key="currentPage">
      <a-tab-pane v-for="item of tabList" :key="item.value" :title="setTitle(item)"> </a-tab-pane>
    </a-tabs>
  </div>

  <DeliveryOrderTableBody :getNum="getNum" :currentIndex="currentPage" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import { findSupplierDeliveryCountByStatus } from '@/api/supplier'
  import DeliveryOrderTableBody from './components/deliveryOrderTableBody.vue'
  interface itemType {
    label: string
    num?: string
    value: string
  }
  export default defineComponent({
    components: {
      DeliveryOrderTableBody,
    },
    setup() {
      const data: any = reactive({
        currentPage: '',
        tabList: [
          { label: '全部', value: '' },
          { label: '待配货', num: '', value: '10' },
          { label: '待出库', num: '', value: '20' },
          { label: '待签收', num: '', value: '30' },
          { label: '待入库', num: '', value: '40' },
          { label: '入库中', num: '', value: '50' },
          { label: '已入库', num: '', value: '60' },
          { label: '已拒收', num: '', value: '70' },
        ],
        orderTagNum: 0,
        status: '',
      })

      const setTitle = (item: itemType) => {
        if (item.num) {
          return `${item.label}(${item.num})`
        } else {
          return `${item.label}`
        }
      }

      const getNum = async () => {
        const res: any = await findSupplierDeliveryCountByStatus()
        let arr = res?.data || []
        arr.forEach((e: any) => {
          data.tabList.forEach((el: any) => {
            if (e.status == el.value) {
              el.num = e.totalCount
            }
          })
        })
      }

      getNum()

      return {
        ...(toRefs(data) as any),
        setTitle,
        getNum,
      }
    },
  })
</script>

<style lang="less" scoped>
  .con {
    height: 40px;
  }
</style>
